<template>
  <div class="product-list">
    <index-header></index-header>
    <div class="container">
        <div class="table">
            <div class="line">
                <div class="title">定制项目</div>
                <div class="right">
                    <div 
                    
                    class="right-item" 
                    v-for="(item,index) of typeList"
                    :key="item"
                    :class="{active:activeType[index]}" 
                    @click="changeTab('type',index,item)">{{item}}</div>
                    
                </div>
            </div>
            <div class="line">
                <div class="title">风格</div>
                <div class="right">
                    <!-- <div class="right-item" @click="changeTab('style',0,item)">全部</div> -->
                    <div 
                    
                    class="right-item" 
                    v-for="(item,index) of styleList"
                    :key="item"
                    :class="{active:activeStyle[index]}" 
                    @click="changeTab('style',index,item)">{{item}}</div>
                    
                </div>
            </div>
             <div class="line">
                <div class="title">布局</div>
                <div class="right">
                    <div 
                    
                    class="right-item" 
                    v-for="(item,index) of bujuList"
                    :key="item"
                    :class="{active:activeBuju[index]}" 
                    @click="changeTab('buju',index,item)">{{item}}</div>
                    
                </div>
            </div>
             <div class="line">
                <div class="title">面积</div>
                <div class="right">
                    <div 
                    
                    class="right-item" 
                    v-for="(item,index) of sizeList"
                    :key="item"
                    :class="{active:activeSize[index]}" 
                    @click="changeTab('size',index,item)">{{item}}</div>
                    
                </div>
            </div>
             <div class="line">
                <div class="title">价格</div>
                <div class="right">
                    <div 
                    
                    class="right-item" 
                    v-for="(item,index) of priceList"
                    :key="item"
                    :class="{active:activePrice[index]}" 
                    @click="changeTab('price',index,item)">{{item}}</div>
                    
                </div>
            </div>

        </div>

        <div class="form">
            <input type="text" v-model="username" placeholder="您的姓名" class="username">
            <input type="text" v-model="phone" placeholder="您的电话">
            <div class="submit" @click="submit()"></div>
        </div>
        <div class="sectab">
            <span 
            v-for="(item,index) of tabList"
            :key="item"
            :class="{activeTab:activeTab[index]}" 
            @click="changeTab('tab',index,item)"
            >{{item}}</span>
        </div>
    </div>

    <list-product :list="this.data"></list-product>
    <div class="bg container">`
            <el-pagination
            class="fenye"
            background
            layout="prev, pager, next"
            :page-size="this.size"
            :total="this.total"
            @current-change="handleCurrentChange"
            :current-page.sync="page"
           >
            </el-pagination>
    </div>
    <div class="container">
         <div class="title2">
                <h1 class="ac-title">为您推荐</h1>
                
           </div>
    </div>
    <list-tuijian :list="this.litter"></list-tuijian>
    <index-footer></index-footer>
    
   
  </div>

  
</template>

<script>
import IndexHeader from './../Index/components/Header.vue';
import IndexFooter from './../Index/components/Footer.vue';
import ListProduct from './components/List.vue';
import ListTuijian from './components/Tuijian.vue';

import { mapState } from 'vuex'
import axios from 'axios'
const typeList = ['全部','厨房','卧室','客厅','餐厅','书房','儿童房','浴室','木门']
// const styleList = ['全部']
const bujuList = ['全部','一字型','廊型','L型','U型']
const sizeList = ['全部','6㎡以下','6-8㎡','8-10㎡','10-15㎡','15㎡以上']
const priceList = ['全部','10000元以下','10000元-30000元','30000元以上']
const sectab = ['最热','最新','价格','特惠']
export default {
    name: 'ProductDetail',
    components:{
    IndexHeader,
    IndexFooter,
    ListProduct,
    ListTuijian
   
    },
    data () {
    return {
        page:1,
        size:12,
        total:1,
        username:'',
        phone:'',
        message:'商品列表页',
        description:'商品列表页',
        productName:'',
        productFirstName:'',
        productSecondName:'',
        detail:{},
        activeType:[],
        typeList:typeList,
        activeStyle:[],
        styleList:[],
        activeBuju:[],
        bujuList:bujuList,
        activeSize:[],
        sizeList:sizeList,
        activePrice:[],
        priceList:priceList,
        tabList:sectab,
        activeTab:[],
        data:[],
        litter :[],
        //chu传值
        tab_item:'',
        style_item:'',
        type_item:'',
        price_item:[''],

        
    }
    },
    computed:{
    ...mapState(['baseUrl'])
    },
    watch: {
      '$route' (to, from) {
          // console.log("当前路由路径",this.$route.path);
        //   this.getDetail()
      },
      styleList(){
          this.initStyle();
      }

    },
    mounted(){
        // console.log('mounted')
        this.getList()
        this.init()
    },
    methods:{
        init(){
            this.initType();
            // this.initStyle();
            this.initBuju();
            this.initSize();
            this.initPrice();
            this.initTab();
            this.getPageInit();
            this.getInfo();
            this.getStyleList()
        },

        getStyleList (){
          
            axios.get(
                this.baseUrl+'cms/getStyle',
                {
                    params:{
                        id:false
                    }
                })
            .then(this.getStyleListSucc)
        },
        getStyleListSucc (response){
            // console.log(response)
           
            this.styleList = response.data
           
            
        },
        handleCurrentChange(val) {
        //  console.log(`当前页: ${val}`);
         this.page = val;
         if(this.tab_item!=''){
             this.tabSearch();
            // console.log('feikong1')
         }else{
             if(this.style_item!=""||this.type_item!=""||this.price_item!=""){
                //  console.log('feikong2')
                this.searchType()
             }else{
                 this.getPageInit();
             }
         }
        //  this.getPageInit();
        },
         changeTab(func,index,item){
           
             switch(func){
                case 'type':
                    for(let i=0;i<this.activeType.length;i++){
                        this.activeType.splice(i,1,false);
                        if(i===index){
                            // console.log(this.activeType.length)
                        // console.log(index)
                            this.activeType[index]?
                            this.activeType.splice(index,1,false):
                            this.activeType.splice(index,1,true);
                        }
                    }
                    // console.log(item)
                    if(index==0){
                             this.type_item='';
                    }else if(this.typeList[index]=='厨房'){
                        this.type_item = '橱柜'
                    }else if(this.typeList[index]=='木门'){
                        this.type_item = '木门'
                    }else{
                        this.type_item = '衣柜'
                    }
                break;
                case 'style':
                    
                    for(let i=0;i<this.activeStyle.length;i++){
                        // console.log(this.activeStyle.length)
                        // console.log(index)
                        this.activeStyle.splice(i,1,false);
                        if(i===index){
                            this.activeStyle[index]?
                            this.activeStyle.splice(index,1,false):
                            this.activeStyle.splice(index,1,true);
                        }
                    } 
                    // console.log(this.activeStyle)
                     if(index==0){
                             this.style_item = '';
                        }else{
                             this.style_item = this.styleList[index]      
                        }
                               
                break;
                case 'buju':
                    
                    for(let i=0;i<this.activeBuju.length;i++){
                        // console.log(this.activeBuju.length)
                        // console.log(index)
                        this.activeBuju.splice(i,1,false);
                        if(i===index){
                            this.activeBuju[index]?
                            this.activeBuju.splice(index,1,false):
                            this.activeBuju.splice(index,1,true);
                        }
                    }    
                    // console.log(this.activeBuju)               
                break;
                 case 'size':
                    
                    for(let i=0;i<this.activeSize.length;i++){
                        // console.log(this.activeSize.length)
                        // console.log(index)
                        this.activeSize.splice(i,1,false);
                        if(i===index){
                            this.activeSize[index]?
                            this.activeSize.splice(index,1,false):
                            this.activeSize.splice(index,1,true);
                        }
                    }                   
                break;
                case 'price':
                    
                    for(let i=0;i<this.activePrice.length;i++){
                        // console.log(this.activePrice.length)
                        // console.log(index)
                        this.activePrice.splice(i,1,false);
                        if(i===index){
                            this.activePrice[index]?
                            this.activePrice.splice(index,1,false):
                            this.activePrice.splice(index,1,true);
                        }
                    } 
                    // this.price_item = priceList[index];
                    if(index==0){
                             this.price_item = [''];
                        }else if(index==1){
                            this.price_item = [0,1000];
                        }else if(index==2){
                           this.price_item = [1000,3000];
                        }else if(index==3){
                            this.price_item = [3000,6000];
                        } 
                        
                        // console.log(this.price_item)              
                break;
                case 'tab':
                    
                    for(let i=0;i<this.activeTab.length;i++){
                        // console.log(this.activeTab.length)
                        // console.log(index)
                        this.activeTab.splice(i,1,false);
                        if(i===index){
                            this.activeTab[index]?
                            this.activeTab.splice(index,1,false):
                            this.activeTab.splice(index,1,true);
                        }
                    }
                    if(index==0){
                        this.tab_item = '最热';
                    }else if(index==1){
                        this.tab_item = '最新';
                    }else if(index==2){
                        this.tab_item = '价格';
                    }else if(index==3){
                         this.tab_item = '特惠';
                    }

                break;
             }
             if(func!='tab'){
                 this.searchType(); 
             }else{
                 this.tabSearch(); 
             }
            
        },
        tabSearch(){
            axios.get(this.baseUrl+'product/tab_search',
            {
                params:{
                    tab:this.tab_item,
                    page:this.page
                   
                }
            }).then(this.tabSearchSucc)
        },
        tabSearchSucc(response){
            // console.log(response)
            this.data = response.data.data
            this.total = response.data.count;
        },
        searchType(){
            // console.log(this.price_item)
              axios.get(this.baseUrl+'product/search_type_list',
            {
                params:{
                    type:this.type_item,
                    style:this.style_item,
                    price:this.price_item,
                    page:this.page
                }
            }).then(this.searchTypeSucc)
        },
        searchTypeSucc(response){
            // console.log(response)
            this.data = response.data.data
            this.total = response.data.count;

        },
        initType(){
            for(let i =0;i<this.typeList.length;i++){
                this.activeType.push(false)
            }
        },
        initStyle(){
            for(let i =0;i<this.styleList.length;i++){
                this.activeStyle.push(false)
            }
        },
        initBuju(){
            for(let i =0;i<this.bujuList.length;i++){
                this.activeBuju.push(false)
            }
        },
        initSize(){
            for(let i =0;i<this.sizeList.length;i++){
                this.activeSize.push(false)
            }
        },
        initPrice(){
            for(let i =0;i<this.priceList.length;i++){
                this.activePrice.push(false)
            }
        },
        initTab(){
            for(let i =0;i<this.tabList.length;i++){
                this.activeTab.push(false)
            }
        },
        change(){
            this.active = !this.active
        },
        getList(){
        //    console.log(this.$route.params)
        //     axios.get(this.baseUrl+'product/'+this.$route.params.id
        //         )
        // .then(this.getDetailSucc)
        },
        getDetailSucc(response){
         
        },
        submit (){
            axios.get(this.baseUrl+'cms/joinAdd',
            {
                params:{
                    username:this.username,
                    phone:this.phone,
                    message:this.message,
                    description:this.description,
                    local:'0'
                }
            }).then(this.submitSucc)
        },
        submitSucc(response){
        //    console.log(response)
        const h = this.$createElement;
            if(response.data.errno===0){        
            this.$notify({
                title: '成功提醒',
                type: 'success',
                message: h('i', { style: 'color: teal'}, '留言成功，稍后客服会给你回复，请耐心等待')
            });
            }else if(response.data.errno===1){          
                this.$notify.error({
                title: '错误提醒',
                message: h('i', { style: 'color: teal'}, '该手机号已提交过留言，请等待客服回复')
                });
            }
        },
        //推荐
        getInfo(){
     
            axios.get(this.baseUrl+'product/list_tuijian',
                {
                    params:{
                            categoryName:this.prodcutName
                            }                 
                }
            )
        .then(this.getInfoSucc)
        },
        getInfoSucc(response){
            this.litter = response.data.litter          
        },
        //产品列表
        getPageInit(){
            axios.get(this.baseUrl+'product/all_pc',
            {
                params:{
                    page:this.page,
                    size:this.size,

                }
            }).then(this.pageInit)
        },
        pageInit(response){
            // console.log(response.data)
            this.data = response.data.data
            this.total = response.data.count;
        }

    }
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
.title2  
    margin-top 50px
    overflow hidden
    margin-bottom 22px
.container
    container() 
.title2>h1
  title()
.ac-title::after
  titleAfter()
.bg 
    height 60px
    background #e3e4e6
    position relative
.fenye 
    position absolute
    left 50%
    top 50%
    transform translate3d(-50%,-50%,0);
.container
  container()  
html 
  transition all 0.3s
.product-list 
    background #f0f1f2
.show
  height 400px
.table 
    background white
    border 1px solid #b5b5b5
    border-top none
.line 
    border-top 1px solid #b5b5b5
    height 78px
    overflow hidden
.title 
    float left
    width 160px
    background #e3e4e6
    height 100%
    line-height 78px
    text-align center
    color #333333
    font-size 20px
.right
    float left
    overflow hidden
    width 1036px;
.right-item 
    float left
    padding 7px 20px
    margin 24px 10px
    border-radius 5px
    font-size 16px
    cursor pointer
.right-item:hover 
    background #00a6ba
    color white
.right-item.active 
    background #00a6ba
    color white

.form 
    background url('~@/assets/product-list/listform.png') no-repeat
    height 110px
    margin 50px 0
.form>input
    margin 0 10px
    margin-top 34px
    width 200px
    height 40px
    float left
    text-indent 10px
.submit
    float left
    margin-top 34px
    width 200px
    height 40px
    margin-left 12px
.form>.username
    margin-left 480px
.sectab
    background #e3e4e6
    height 60px
.sectab>span 
    cursor pointer
    height 60px
    line-height 60px
    padding 0 30px
    font-size 20px
    color #333333 
    border-right 1px solid #333333
.sectab>.activeTab
    color #00a6ba
</style>
